<template>
  <div>
    <div style="margin-top: 10px">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          :model="searchInfo"
          class="demo-form-inline"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="Phone:" prop="phone">
              <el-input
                style="width: 240px"
                v-model="searchInfo.phone"
                placeholder="please input phone number"
              ></el-input>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Reviewers:" prop="reviewers">
              <el-select
                style="width: 220px"
                v-model="searchInfo.reviewers"
                placeholder="please select reviewers"
              >
                <el-option label="杨一" value="杨一"></el-option>
                <el-option label="赵亦" value="赵亦"></el-option>
              </el-select>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Appli Time:" prop="appli_time">
              <el-date-picker
                v-model="searchInfo.appli_time"
                type="datetimerange"
                range-separator="to"
                start-placeholder="Start time"
                end-placeholder="End time"
              >
              </el-date-picker>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Age:" prop="age.lower_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.age.lower_limit"
                placeholder="lower limit"
              ></el-input>
            </el-form-item>
            <el-form-item><i class="el-icon-right"></i></el-form-item>
            <el-form-item prop="age.upper_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.age.upper_limit"
                placeholder="upper limit"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col
              :span="6"
              :offset="18"
              style="text-align: end; padding-top: 10px; padding-right: 10px"
            >
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <br />
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span class="search-card-title">Application Table</span>
              </div>
            </template>
            <el-table
              :data="tableData1"
              style="width: 100%"
              row-key="id"
              border
              lazy
              :load="load"
              @selection-change="handleSelectionChange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              ><el-table-column type="selection" width="45"> </el-table-column>
              <el-table-column prop="phone" label="Phone" width="180">
              </el-table-column>
              <el-table-column prop="number" label="Number" width="180">
              </el-table-column>
              <el-table-column prop="ques_name" label="Ques Name" width="120">
              </el-table-column>
              <el-table-column prop="age" label="Age" width="80">
              </el-table-column>

              <el-table-column
                prop="appli_time"
                label="Apply Time"
                width="180"
                sortable
              >
              </el-table-column>

              <el-table-column label="State" width="180">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.state == 'Pending Review'"
                    type="danger"
                    size="mini"
                    round
                  >
                    Pending Review
                  </el-button>
                  <el-button
                    v-if="scope.row.state == 'Under Review'"
                    type="warning"
                    size="mini"
                    round
                  >
                    Under Review
                  </el-button>
                  <el-button
                    v-if="scope.row.state == 'Review Completion'"
                    type="success"
                    size="mini"
                    round
                  >
                    Review Completion
                  </el-button>
                </template>
              </el-table-column>

              <el-table-column prop="reviewers" label="Reviewers" width="120">
              </el-table-column>

              <el-table-column label="Remarks" width="320">
                <template slot-scope="scope">
                  <el-input
                    type="text"
                    maxlength="20"
                    show-word-limit
                    placeholder="please input remark"
                    v-model="scope.row.remarks"
                    ><el-button
                      slot="append"
                      icon="el-icon-check"
                      circle
                      @click="remarkSave(scope.row.remarks)"
                    ></el-button>
                  </el-input>
                </template>
              </el-table-column>

              <el-table-column label="Operations">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-folder-checked"
                    @click="handleCheck(scope.$index, scope.row)"
                    >Check</el-button
                  >

                  <el-button
                    v-if="scope.row.status == 1"
                    type="danger"
                    size="mini"
                    icon="el-icon-lock"
                    @click="handleLock(scope.row.id, 0)"
                    >Locked</el-button
                  >
                  <el-button
                    v-if="scope.row.status == 0"
                    type="primary"
                    size="mini"
                    icon="el-icon-unlock"
                    @click="handleLock(scope.row.id, 1)"
                    >Unlocked</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <br />
            <el-pagination
              :currentPage="pagination.currentPage"
              :page-size="pagination.pageSize"
              :page-sizes="[10, 50, 100, 200]"
              layout="total, sizes, prev, pager, next"
              :total="pagination.totalPages"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <br /><br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        {
          id: 1,
          phone: "13436000485",
          number:"LT-XHDSHD01",
          ques_name: "王小虎",
          age: 46,
          appli_time: "2016-05-01",
          state: "Pending Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 2,
          phone: "13436019687",
          number:"LT-XHDSHD01",
          ques_name: "张三",
          age: 45,
          appli_time: "2016-05-02",
          state: "Under Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 3,
          phone: "13436026530",
          number:"LT-XHDSHD01",
          ques_name: "赵四",
          age: 37,
          appli_time: "2016-05-02",
          state: "Pending Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
          hasChildren: true,
        },
        {
          id: 4,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王五",
          age: 59,
          appli_time: "2016-05-02",
          state: "Under Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 5,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王五",
          age: 36,
          appli_time: "2016-05-02",
          state: "Pending Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 6,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王6",
          age: 45,
          appli_time: "2016-05-02",
          state: "Under Review",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 7,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王7",
          age: 68,
          appli_time: "2016-05-02",
          state: "Pending Review",
          reviewers: "赵亦",
          remarks: "",
          status: 0,
        },
        {
          id: 8,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王8",
          age: 38,
          appli_time: "2016-05-02",
          state: "Review Completion",
          reviewers: "杨一",
          remarks: "",
          status: 0,
        },
        {
          id: 9,
          phone: "13436856230",
          number:"LT-XHDSHD01",
          ques_name: "王9",
          age: 75,
          appli_time: "2016-05-02",
          state: "Review Completion",
          reviewers: "赵亦",
          remarks: "",
          status: 0,
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalPages: 10,
      },
      searchInfo: {
        phone: "",
        reviewers: "",
        appli_time: [],
        age: { lower_limit: "", upper_limit: "" },
      },
    };
  },
  mounted() {},
  methods: {
    //懒加载
    load(tree, treeNode, resolve) {
      console.log(tree, treeNode, "看看");
      setTimeout(() => {
        resolve([
          {
            id: 31,
            phone: "13436026530",
            number:"LT-XHDSHD01",
            ques_name: "李青",
            age: 55,
            appli_time: "2016-05-01",
            state: "Pending Review",
            reviewers: "赵亦",
            remarks: "",
            status: 0,
          },
          {
            id: 32,
            phone: "13436026530",
            number:"LT-XHDSHD01",
            ques_name: "赵一",
            age: 45,
            appli_time: "2016-05-02",
            state: "Pending Review",
            reviewers: "赵亦",
            remarks: "",
            status: 0,
          },
        ]);
      }, 1000);
    },
    //修改问卷,问卷的回显
    handleCheck(index, row) {
      this.$router.push("/questionnaireManagement/editQuestionnaire");
      console.log(index, row);
    },
    //锁定问卷
    handleLock(id, status) {
      this.tableData1[id - 1].status = status;
    },
    //多选选中
    handleSelectionChange(val) {
      console.log(val);
    },
    //搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    searchForm(formName) {
      //搜索表单信息
      console.log(formName);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    remarkSave(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}
.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-card-title {
  font-size: 16px;
  font-weight: 600;
}
.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}
</style>